// 权限拦截在路由跳转 导航守卫
// 在 main.js 引入了 不需要导出 让代码执行就行


import router from '@/router'
import store from '@/store'    // 引入vuex
import nprogress from "nprogress"  // 引入进度条
import "nprogress/nprogress.css"   // 引入进度条样式


// 白名单
var baiMingdan = ['/login', '/404'];

// 前置守卫 // to 从哪个路由 // from 到哪个路由
// next() 放行  next(false) 阻止 next(地址) 跳转到某个地址
router.beforeEach(async (to, from, next) => {

  nprogress.start()  // 开启进入条
  // 是否有 token
  if (store.getters.token) {

    if (to.path !== '/login') {

      if (!store.getters.userId) {
        // await store.dispatch('user/getUserInfo')
        // 如果没有id才表示当前用户资料没有获取过
        // async 函数所return的内容 用 await就可以接收到
        const { roles } = await store.dispatch('user/getUserInfo')
        // 如果说后续 需要根据用户资料获取数据的话 这里必须改成 同步
        // 筛选用户的可用路由
        // actions中函数 默认是Promise对象 调用这个对象 想要获取返回的值话 必须 加 await或者是then
        // actions是做异步操作的
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // routes就是筛选得到的动态路由
        // 动态路由 添加到 路由表中 默认的路由表 只有静态路由 没有动态路由
        // addRoutes  必须 用 next(地址) 不能用next()
        // console.log(roles);
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表  铺路
        // 添加完动态路由之后
        next(to.path) // 相当于跳到对应的地址  相当于多做一次跳转 为什么要多做一次跳转
        // 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了
      }
      next()  // 是登录页 就到首页

    } else {
      next('/');    // 不是登录页 放行
    }
  } else {   // 没有 token
    // console.log(baiMingdan.indexOf('/login'));
    if (baiMingdan.indexOf(to.path) > -1) {
      next();      // 是白名单 放行
    } else {
      // console.log(to);
      // console.log(from);
      next('/login')  // 不是白名单 去登录
    }
  }
  nprogress.done()  // 关闭进度条 防止手动改地址跳转 不执行后置路由守卫
})

// 后置守卫  从那到哪 不需要放行
router.afterEach((to, from) => {
  nprogress.done()  // 关闭进度条
})
